<script setup>
const { config } = defineProps({
  config: {
    type: Object,
    default: () => ({
      title: "",
      open: false,
      width: "50%",
      okText: "Submit",
      cancelText: "Cancel",
      subLoading: false,
    }),
  },
});

const emit = defineEmits(["submit", "cancel"]);

const handleOk = () => {
  emit("submit");
};

const handleCancel = () => {
  emit("cancel");
};
</script>

<template>
  <div class="dialog">
    <a-modal
      v-bind="config"
      centered
      :maskClosable="false"
      @cancel="handleCancel"
    >
      <slot />
      <template #footer>
        <a-button v-if="config.cancelText" key="back" @click="handleCancel">
          {{ config.cancelText || "Cancel" }}
        </a-button>
        <a-button
          v-if="config.okText"
          key="submit"
          type="primary"
          :loading="config.subLoading"
          @click="handleOk"
        >
          {{ config.okText || "Submit" }}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<style scoped lang="scss"></style>
